<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <div class="kva-form-search">
          <el-form class="search-form" :inline="true" :model="queryParams" ref="searchForm">
            <el-form-item>
              <el-button type="primary" icon="Plus" @click="handleAdd">添加消息</el-button>
            </el-form-item>
            <el-form-item label="关键词：" prop="keyword">
              <el-input v-model="queryParams.keyword" placeholder="请输入标题..." maxlength="100" clearable />
            </el-form-item>
            <el-form-item label="消息类型" prop="stype">
            <el-select v-model="queryParams.stype" class="m-2" placeholder="请选择" clearable @change="handleSearch">
              <el-option
                  v-for="item in [{value:1,label:'系统'},{value:0,label:'课程'}]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
            </el-form-item>
            <el-form-item label="启用状态" prop="status">
              <el-select v-model="queryParams.status" class="m-2" placeholder="请选择" clearable @change="handleSearch">
                <el-option
                    v-for="item in [{value:1,label:'启用中'},{value:0,label:'禁止中'}]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click.prevent="handleSearch">搜索</el-button>
              <el-button type="danger" icon="Refresh" @click.prevent="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table v-loading="tableLoading" :data="tableData" stripe border :height="settings.tableHeight()">
          <el-table-column fixed :label="'总数：' + total" width="150" align="center">
            <template v-slot='scope'>
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed label="消息标题" prop="title"  align="center"/>
          <el-table-column fixed label="消息内容" prop="msg"  align="center"/>
          <el-table-column label="消息类型" width="200" align="center">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.stype"
                  @change="handleStatus(scope.row)"
                  :active-value="1"
                  active-text="系统"
                  inactive-text="课程"
                  :inactive-value="2">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="是否启用" width="200" align="center">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.status"
                  @change="handleStatus(scope.row)"
                  :active-value="1"
                  active-text="启用中"
                  inactive-text="已禁止"
                  :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="200" align="center">
            <template #default="scope">
              <span>{{ formatTimeToStr(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" width="200" align="center">
            <template #default="scope">
              <span>{{ formatTimeToStr(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default="scope">
              <el-button icon="edit" type="primary" size="small" @click.stop="handleEdit(scope.row)">编辑</el-button>
              <el-button icon="remove" type="danger" size="small" @click.stop="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="kva-pagination-box center">
          <el-pagination :current-page="queryParams.pageNo" :page-size="queryParams.pageSize"
                         :page-sizes="[10, 20, 30, 40, 50, 100]"
                         layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange" />
        </div>
      </home-page-header>
    </div>
    <add-message ref="addRef" @load="handleSearch"></add-message>
  </div>
</template>

<script  setup>
import settings from '@/settings'
import KVA from '@/utils/kva.js'
import { formatTimeToStr } from '@/utils/date.js'
import AddMessage from '@/views/sys/components/AddMessage.vue'

import {
  findPages,
  removeById,
  updateStatus
} from '@/api/msg/index.js'


// 搜索属性定义
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  status:"",
  keyword: "",
  stype: ""
})

// 定义响应式得列表数据容器
const tableData = ref([])
const tableLoading = ref(false)
const pages = ref(0)
const total = ref(0)
const searchForm = ref({})

// 编辑添加相关
const addRef = ref({})
// 消息授权
const menuRef = ref(null);
const apiRef = ref(null);

// 加载数据
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total * 1
  pages.value = resp.data.pages * 1
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLodeData()
}

// 重置
const handleReset = () => {
  searchForm.value.resetFields()
  handleSearch()
}

// 分页size更改
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  handleLodeData()
}

// 分页pageNo更改
const handleCurrentChange = (pno) => {
  queryParams.pageNo = pno
  handleLodeData()
}


// 添加事件
const handleAdd = () => {
  addRef.value.handleOpen()
}

// 编辑
const handleEdit = (row) => {
  addRef.value.handleOpen(row.id)
}

// 删除
const handleDel =  (row) => {
  KVA.confirm("警告", "<strong>您确定要执行此次操作吗？</strong>", { icon: "success" }).then(async() => {
    const opid = row.id
    await removeById(opid)
    KVA.notifySuccess("删除成功!")
    handleLodeData()
  })
}

// 更新状态
const handleStatus = async (row) => {
  await updateStatus(row.id,"status",row.status)
  KVA.notifySuccess("操作成功!")
}

// 打开消息授权菜单
const handleOpenMenu = (row) => {
  menuRef.value.handleOpen(row)
}

// 打开消息授权api
const handleOpenApi = (row) => {
  apiRef.value.handleOpen(row)
}

onMounted(() => {
  handleLodeData()
})
</script>


